<template>
    <!-- 搜索框部分 -->
    <div class="table-box-search" v-if="searchData.length > 0">
        <el-form label-width="80px" :model="formData">
            <el-row>
                <template v-for="item in searchData">
                    <el-col :span="item.span | 4" v-show="!item.show">
                        <el-form-item :label="item.label" v-if="item.type == 'Input'"
                            :labelWidth="item.label == '' ? '0px' : item.labelWidth">
                            <el-input v-model="formData[item.prop]" :placeholder="item.placeholder || '请输入' + item.label"
                                :clearable="item.clearable || true" />
                        </el-form-item>
                        <el-form-item :label="item.label" v-if="item.type == 'Select'"
                            :labelWidth="item.label == '' ? '0px' : item.labelWidth">
                            <el-select v-model="formData[item.prop]" :placeholder="item.placeholder || '请选择' + item.label"
                                style="width: 100%;" :clearable="item.clearable || true">
                                <el-option v-for="ele in item.options" :key="ele.value" :label="ele.label"
                                    :value="ele.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="item.label" v-if="item.type == 'DatePicker'"
                            :labelWidth="item.label == '' ? '0px' : item.labelWidth">
                            <el-date-picker v-model="formData[item.prop]" type="date"
                                :placeholder="item.placeholder || '请选择' + item.label" style="width: 100%;"
                                :format="item.format || 'YYYY-MM-DD'" :value-format="item.valueFormat || 'YYYY-MM-DD'"
                                :clearable="item.clearable || true" />
                        </el-form-item>
                        <el-form-item :label="item.label" v-if="item.type == 'Daterange'"
                            :labelWidth="item.label == '' ? '0px' : item.labelWidth">
                            <el-date-picker v-model="formData[item.prop]" type="daterange"
                                :placeholder="item.placeholder || '请选择' + item.label" style="width: 100%;"
                                :start-placeholder="item.startPlaceholder || '开始日期'"
                                :end-placeholder="item.endPlaceholder || '结束日期'" :format="item.format || 'YYYY-MM-DD'"
                                :value-format="item.valueFormat || 'YYYY-MM-DD'" :clearable="item.clearable || true" />
                        </el-form-item>
                        <el-form-item :label="item.label" v-if="item.type == 'Datetimerange'"
                            :labelWidth="item.label == '' ? '0px' : item.labelWidth">
                            <el-date-picker v-model="formData[item.prop]" type="datetimerange"
                                :placeholder="'请选择' + item.label" style="width: 100%;"
                                :start-placeholder="item.startPlaceholder || '开始时间'"
                                :end-placeholder="item.endPlaceholder || '结束时间'" :format="item.format || 'YYYY-MM-DD'"
                                :value-format="item.valueFormat || 'YYYY-MM-DD'" :clearable="item.clearable || true" />
                        </el-form-item>
                    </el-col>
                </template>
                <el-col :span="initLength">
                    <el-form-item label-width="0">
                        <div style="margin-left: 20px;display: flex;align-items: center;"><el-button type="primary"
                                @click="handleSearch" :icon="Search">搜索</el-button>
                            <el-button plain :icon="Delete" @click="handleReset">重置</el-button>
                            <div class="open-close" @click="isOpen = !isOpen" v-if="isShowOpen">
                                <div style="margin-right: 5px;">{{ isOpen ? '展开' : '收起' }}</div>
                                <div style="transition: 0.3s;"
                                    :style="[{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }, { paddingTop: isOpen ? '-3px' : '2px' }]">
                                    <el-icon>
                                        <ArrowUpBold />
                                    </el-icon>
                                </div>
                            </div>
                        </div>
                    </el-form-item>

                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script setup>
// 事件
const emit = defineEmits(['search-change', 'reset'])
const formData = ref({}) // 表单数据对象
const searchData = ref([])//搜索框数组
const isOpen = ref(false) //展开收起
const initLength = ref(4) //初始值     搜索/重置栏的比例值
const isShowOpen = ref(true)  //是否显示 收起与展开按钮


const props = defineProps({
    // 搜索表单列表
    searchColumns: {
        type: Object,
        default: () => []
    },
    // 是否显示搜索框
    isShow: {
        type: Boolean,
        default: true
    }
})


// 监听搜索框列数
watch(() => props.searchColumns, (val) => {
    searchData.value = val
    let inItSpan = initLength.value //初始长度  赋值
    // 循环变量拿到搜索框的长度
    searchData.value.map((item, index) => {
        inItSpan += item.span
    })
    // 判断是否显示收起与展开按钮
    if (inItSpan <= 24) {
        isShowOpen.value = false
    }

}, {
    deep: true,
    immediate: true
})

// 监听搜索框 展开收起
watch(() => isOpen.value, (val) => {
    if (val) {
        let totalSpan = 0 //累加总长度
        let availableSpan = 24 - initLength.value//可用长度
        let currIndex = 0

        searchData.value.map((item, index) => {
            if (totalSpan <= availableSpan) {
                totalSpan += item.span
                currIndex = index
            }
        })
        searchData.value.map((item, index) => {
            if (currIndex <= index) {
                item.show = true
            }
        })
    } else {
        searchData.value.map((item, index) => {
            item.show = false
        })
    }
},)

// 搜索表单查询按钮
async function handleSearch() {
    let params = toRaw(formData.value)
    let list = Object.keys(params)
    let objInfo = {}
    // 遍历获取赋值
    list.forEach(ele => {
        props.searchColumns.forEach(item => {
            if (item.type == "Datetimerange" && ele == item.prop && item.configParams && item.configParams.length > 1) {
                objInfo[item.configParams[0]] = params[item.prop][0]
                objInfo[item.configParams[1]] = params[item.prop][1]
                delete params[item.prop]
            }
        })
    })

    emit('search-change', { ...objInfo, ...params })
}
// 重置按钮
async function handleReset() {
    formData.value = {}
    handleSearch()
    emit('reset', formData.value)
}

</script>

<style lang='scss' scoped>
.table-box-search {
    margin-top: 10px;
    box-shadow: 0 0 5px 5px #f7f7f7;
    // padding: 16px;
    padding: 16px 16px 0;
    box-sizing: border-box;
    border-radius: 5px;
    transition: 1s;
    overflow: hidden;

    .open-close {
        // width: 80px;
        display: flex;
        align-items: center;
        margin-left: 10px;
        font-size: 14px;
        color: #409eff;
        cursor: pointer;
    }
}

.show {
    height: var(--height);
}

.hidd {
    height: var(--height);
}
</style>
<style lang="scss">
.table-box-search {
    .el-form {
        .el-form-item__content {
            .el-input__wrapper {
                width: 100%;
            }
        }
    }
}
</style>